<template>
    <div>
        <!-- 搜索 -->
        <div>
            <form action="/">
                <van-search v-model="value" show-action placeholder="请输入搜索关键词 " @search="onSearch" @cancel="onCancel" />
            </form>
        </div>
        <!-- 单词部分 -->
        <div style="margin-bottom:100px">
            <div v-for="(item,value) in dcgs" :key="value">
                <Dc @dc="hqhy" :xr2="item"></Dc>
            </div>
        </div>
        <!-- 音频，接口采用有道词典 http://dict.youdao.com/dictvoice?audio=   -->
        <div>
            <audio controls="controls" hidden="true" preload ref="audio">
                <!-- src动态绑定 -->
                <!-- 'http://dict.youdao.com/dictvoice?audio='+sj.danci -->
                <source :src="'http://dict.youdao.com/dictvoice?audio=' + 'from'" type="audio/mp3" />
                <source src="song.ogg" type="audio/ogg" />
            </audio>
        </div>
    </div>
</template>

<script>
import Dc from "../../components/dc.vue"
import { mapState, mapMutations } from "vuex"
export default {
    data() {
        return {
            // 搜查框内容
            value: "",
            dc: null,
            timer: null,
        };
    },
    watch: {
        // 监听输入框内容变化，然后使用防抖调用搜索方法
        value() {
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.sousuo(this.value)
                // 储存value的值，保存状态
                sessionStorage.setItem('value',this.value)
            }, 500);
          
        }
    },
    computed: {
        ...mapState(['dcgs'])
    },
    methods: {
        ...mapMutations(['sousuo']),
        onSearch(val) {
            Toast(val);
        },
        onCancel() {
            this.$router.back()
        },
        hqhy(val) {
            console.log(val, 'val')
            this.dc = val;
            let url = "http://dict.youdao.com/dictvoice?audio=" + this.dc;
            this.$refs.audio.src = url;
            // 控制发音
            this.$refs.audio.play();
        },

    },
    created() {
        this.sousuo(this.value)
        this.value=sessionStorage.getItem('value')
    },
    components: {
        Dc
    },

};

</script>

<style lang="less" scoped>
.qcfd:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.fda {
    position: absolute;
}

.fhtb {
    margin-left: 8px;
    margin-top: 8px;
    color: rgb(16, 168, 238);
    font-size: 38px;
    transform: rotateY(180deg);
}
</style>